<template>
  <el-drawer v-model="isDrawerVisible" title="通知详情" :with-header="true">
    <el-descriptions direction="vertical" :column="3" size="large" border>
      <el-descriptions-item label="通知ID">{{ notice.id }}</el-descriptions-item>
      <el-descriptions-item label="用户ID">{{ notice.userId }}</el-descriptions-item>
      <el-descriptions-item label="时间">{{ notice.time }}</el-descriptions-item>
      <el-descriptions-item label="内容" :span="3">
        <div class="notice-content">{{ notice.text }}</div>
      </el-descriptions-item>
      <el-descriptions-item label="媒体资源路径">{{ notice.url || '无' }}</el-descriptions-item>
      <el-descriptions-item label="评论内容">
        <div class="notice-content">{{ notice.commentText || '评论内容为空' }}</div>
      </el-descriptions-item>
    </el-descriptions>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 控制抽屉的显示
const isDrawerVisible = ref(false);

const notice = ref({
  id: '',
  userId: '',
  time: '',
  text: '',
  url: '',
  commentText: ''
});

// 接收父组件传递过来的通知数据
const handleDetailData = (obj) => {
  console.log('收到的通知数据:', obj); // 添加日志输出
  isDrawerVisible.value = true;
  notice.value = obj;
}

// 将 handleDetailData 暴露给父组件
defineExpose({
  handleDetailData
})
</script>

<style scoped>
.notice-content {
  min-height: 80px;
  padding: 10px;
  border-radius: 4px;
  background-color: #f5f7fa;
  white-space: pre-wrap; /* 保留换行符 */
}
</style>